﻿<%@ Page Language="C#" AutoEventWireup="true" CodeFile="TESTJQueryMasonry.aspx.cs" Inherits="TESTJQueryMasonry" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
</head>
<body>
    <form id="form1" runat="server">
    <div>
    
    </div>
    </form>

    <script>
        $(function () {

            var $container = $('#container').masonry({
                itemSelector: '.item',
                columnWidth: 200
            });

            $('#load-images').click(function () {
                var $items = getItems();
                // hide by default
                $items.hide();
                // append to container
                $container.append($items);
                $items.imagesLoaded().progress(function (imgLoad, image) {
                    // get item
                    // image is imagesLoaded class, not <img>
                    // <img> is image.img
                    var $item = $(image.img).parents('.item');
                    // un-hide item
                    $item.show();
                    // masonry does its thing
                    $container.masonry('appended', $item);
                });
            });

        });

        function randomInt(min, max) {
            return Math.floor(Math.random() * max + min);
        }

        function getItems() {
            var items = '';
            for (var i = 0; i < 12; i++) {
                items += getItem();
            }
            // return jQuery object
            return $(items);
        }

        function getItem() {
            var width = randomInt(150, 400);
            var height = randomInt(150, 250);
            var item = '<div class="item">' +
              '<img src="http://lorempixel.com/' +
                width + '/' + height + '/nature" /></div>';
            return item;
        }
    </script>
</body>
</html>
